<template>
  <view class="container">
    <!-- 导航栏 -->
    <nav-bar></nav-bar>
    <!-- 相册内容区 -->
    <view class="album-content">
      <!-- 上传按钮 -->
      <view class="upload-section" @tap="chooseImage" v-if="!images.length">
        <view class="upload-placeholder">
          <image src="/static/icon/图片_picture.svg" class="placeholder-icon"></image>
          <text class="placeholder-text">上传生活照/视频</text>
        </view>
      </view>

      <!-- 图片列表 -->
      <view class="image-list" v-else>
        <view class="image-item" v-for="(item, index) in images" :key="index">
          <image :src="item" mode="aspectFill" class="preview-image"></image>
          <view class="delete-btn" @tap.stop="deleteImage(index)">
            <text class="cuIcon-close"></text>
          </view>
        </view>
        <view class="upload-more" @tap="chooseImage" v-if="images.length < 9">
          <text class="cuIcon-add"></text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import NavBar from '@/components/nav-bar/nav-bar.vue'
export default {
	components: {
		NavBar
	},
  data() {
    return {
      CustomBar: uni.getSystemInfoSync().statusBarHeight + 44,
      images: [],
      uploadUrl: '/upload/minio',
      techId: '',
      baseUrl: ''
    }
  },

  onLoad() {
    // 获取baseUrl
    this.baseUrl = uni.getStorageSync('baseUrl') || 'https://api.example.com'
    
    const userInfo = uni.getStorageSync('userInfo')
    if (userInfo && userInfo.techId) {
      this.techId = userInfo.techId
    }
    this.loadPersonalPhotos()
  },

  methods: {
    goBack() {
      uni.navigateBack()
    },

    // 加载已有照片
    async loadPersonalPhotos() {
      try {
        const result = await uni.request({
          url: `${this.baseUrl}/technician/photos`,
          method: 'GET',
          data: {
            techId: this.techId,
            type: 'personal'
          }
        })

        if (result.data.code === 200) {
          this.images = result.data.data || []
        }
      } catch (err) {
        console.error('获取照片失败:', err)
      }
    },

    // 选择图片
    chooseImage() {
      if (this.images.length >= 9) {
        uni.showToast({
          title: '最多上传9张照片',
          icon: 'none'
        })
        return
      }

      uni.chooseImage({
        count: 9 - this.images.length,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          res.tempFilePaths.forEach(path => {
            this.uploadImage(path)
          })
        }
      })
    },

    // 上传图片
    async uploadImage(filePath) {
      uni.showLoading({
        title: '上传中...'
      })

      try {
        const uploadRes = await uni.uploadFile({
          url: this.baseUrl + this.uploadUrl,
          filePath: filePath,
          name: 'file',
          formData: {
            type: 'personal'
          }
        })

        const result = JSON.parse(uploadRes.data)
        if (result.code === 200) {
          // 更新技师相册信息
          await this.updateTechnicianPhotos(result.data)
          this.images.push(result.data)
        } else {
          throw new Error(result.msg || '上传失败')
        }
      } catch (err) {
        uni.showToast({
          title: err.message || '上传失败',
          icon: 'none'
        })
      } finally {
        uni.hideLoading()
      }
    },

    // 更新技师相册信息
    async updateTechnicianPhotos(photoUrl) {
      try {
        await uni.request({
          url: `${this.baseUrl}/technician/photos`,
          method: 'POST',
          data: {
            techId: this.techId,
            type: 'personal',
            photoUrl: photoUrl
          }
        })
      } catch (err) {
        console.error('更新相册信息失败:', err)
      }
    },

    // 删除图片
    deleteImage(index) {
      uni.showModal({
        title: '提示',
        content: '确定要删除这张照片吗？',
        success: async (res) => {
          if (res.confirm) {
            try {
              await uni.request({
                url: `${this.baseUrl}/technician/photos`,
                method: 'DELETE',
                data: {
                  techId: this.techId,
                  photoUrl: this.images[index]
                }
              })
              this.images.splice(index, 1)
            } catch (err) {
              uni.showToast({
                title: '删除失败',
                icon: 'none'
              })
            }
          }
        }
      })
    },

    // 显示上传要求
    showRequirements() {
      uni.showModal({
        title: '上传要求',
        content: '1. 图片清晰度不低于750×750像素\n2. 最多可上传9张照片\n3. 请上传真实个人生活照片',
        showCancel: false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #f8f8f8;
  padding-bottom: 40rpx;
}

.album-content {
  padding: 30rpx;
}

.upload-section {
  background: #fff;
  border-radius: 12rpx;
  height: 400rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  
  .upload-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    
    .placeholder-icon {
      width: 120rpx;
      height: 120rpx;
      margin-bottom: 20rpx;
    }
    
    .placeholder-text {
      font-size: 28rpx;
      color: #999;
    }
  }
}

.image-list {
  display: flex;
  flex-wrap: wrap;
  margin: -10rpx;
  
  .image-item {
    width: calc(33.33% - 20rpx);
    margin: 10rpx;
    position: relative;
    
    .preview-image {
      width: 100%;
      height: 220rpx;
      border-radius: 8rpx;
    }
    
    .delete-btn {
      position: absolute;
      top: -10rpx;
      right: -10rpx;
      width: 40rpx;
      height: 40rpx;
      background: rgba(0, 0, 0, 0.5);
      border-radius: 20rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      
      .cuIcon-close {
        color: #fff;
        font-size: 24rpx;
      }
    }
  }
  
  .upload-more {
    width: calc(33.33% - 20rpx);
    height: 220rpx;
    margin: 10rpx;
    background: #fff;
    border-radius: 8rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    
    .cuIcon-add {
      font-size: 48rpx;
      color: #999;
    }
  }
}
</style> 